<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/**小屏只显示一个div，大屏显示2个div*/
@media only screen and (min-width:0px) and (max-width:768px) {
	.sm-12 {
		width: 100%;
	}
}

@media only screen and (min-width:768x) and (max-width:992px) {
	.lg-6 {
		width: 50%;
	}
}

div{
float:left;
}
</style>
</head>
<body>
	<!-- 两个不会同时生效,小屏设备上sm-12生效，width是100%，大屏上lg-12生效，width是50% -->
	<div class="sm-12 lg-6">div1</div>
	<div class="sm-12 lg-6">div2</div>
</body>
</html>